<template>
	<view class="container flex-column">
		<!-- 标题 -->
		<headTitle title="分类" :category="true"></headTitle>

		<view class="category-wrapper">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper">
				<view class="left-content">
					<view class="title-content flex-center-center"
						:class="select_index == item.id ? 'onSelected' : ''" 
						v-for="item in catrgoryList" :key="item.id" 
						@tap="choose(item.id)">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper">
				<view class="right-content">
					<image class="right-banner" :src="bannerPath" mode="aspectFill"></image>
					<view v-for="(item, index) in typeList" :key="index">
						<view class="right-title font30 color333 fontb flex-center-center" v-if="item.name != ''">
							{{item.name}}
						</view>
						<view class="right-show flex-wrap">
							<view class="right-item flex-column-center" @tap="toCategory(shop)"
								v-for="shop in item.tertiaryClassification" :key="shop.id">
								<image :src="shop.icon" mode="center"></image>
								<view class="flex-center-center font28 color666">
									{{shop.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
export default {
	data() {
		return {
			select_index: 0, // 选中项
			bannerPath: '',
			catrgoryList: [], // 所有数据
			typeList: [], // 右边分类数据
		};
	},
	onLoad(opt) {
		this.getData(opt)
	},
	methods: {
		async getData(opt) {
			let res = await Api.apiCall('get', Api.goods.getGoodsTypeList, {}, true)
			this.catrgoryList = res
			if(this.catrgoryList && this.catrgoryList.length > 0){
				// 如果没有值，说明是从全部分类进来
				this.select_index = opt.type === undefined ? this.catrgoryList[0].id : opt.type
				this.handleSelectData()
			}
		},
		// 分类商品列表
		toCategory(item) {
			uni.navigateTo({
				url: `/pages/product/list?op=type&name=${item.name}&num=${item.id}`
			});
		},
		// 点击左边分类
		choose(index) {
			if (this.select_index === index) {
				return
			}
			this.select_index = index
			this.handleSelectData()
		},
		// 处理选中数据
		handleSelectData() {
			let idx = this.catrgoryList.findIndex(item => {
				return item.id == this.select_index
			})
			// 全部分类，找不到传的id都用第一个
			if(idx === -1){
				idx = 0
				this.select_index = this.catrgoryList[0].id
			}
			// banner图
			this.bannerPath = this.catrgoryList[idx].bannerImg
			// 右边数据
			this.typeList = this.catrgoryList[idx].secondaryClassification
		},
	},
	components: {
		headTitle
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.category-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	.left-wrapper {
		width: 156rpx;
		height: 100%;
		background-color: #f7f7f7;
		.left-content {
			.title-content {
				width: 100%;
				height: 120rpx;
				color: #AEA8A2;
				font-size: 28rpx;
				&.onSelected {
					font-size: 34rpx;
					font-weight: bold;
					background-color: #fff;
					position: relative;
					color: #333;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6px;
						height: 34rpx;
						background: #A66354;
					}
				}
			}
		}
	}
	.right-wrapper {
		flex: 1;
		width: 594rpx;
		background-color: #ffffff;
		.right-content {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.right-banner {
				width: 554rpx;
				height: 200rpx;
			}
			view {
				.right-title {
					width: 100%;
					height: 42rpx;
					margin-top: 30rpx;
				}
				.right-show {
					width: 100%;
					.right-item {
						padding-top: 30rpx;
						&:nth-child(2n + 1) {
							margin-right: 22rpx;
						}
						image {
							width: 266rpx;
							height: 260rpx;
							margin-bottom: 26rpx;
							box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
						}
					}
				}
			}
			
		}
	}
}
</style>
